<template>
  <view class="custom-empty">
    <image :src="emptyInfo.type == 'notice' ? noticeImg : emptyImg" mode="widthFix" :style="imgStyle" />
    <view class="e-title">{{emptyInfo.title}}</view>
    <view class="e-text">{{emptyInfo.tips || '可以去相亲广场看看'}}</view>
    <custom-btn class="empty-btn" @click="handleFn">{{emptyInfo.btnText || '去相亲广场'}}</custom-btn>
  </view>
</template>

<script setup>
import { urlConf } from "@/config/resource";

const noticeImg = urlConf + "common/notice.svg";
const emptyImg = urlConf + "common/empty.svg";

const emits = defineEmits(["click"]);
const props = defineProps({
  emptyInfo: {
    type: Object,
    default: () => {
      return {
        type: "notice",
        title: "还没有亲家联系您哦",
        tips: "可以去相亲广场看看",
        btnText: "去相亲广场",
      };
    },
  },
});

const imgStyle = computed(() => {
  return props.emptyInfo?.type == "notice" ? { width: "120rpx" } : { width: "240rpx", marginBottom: "60rpx" };
});

const handleFn = () => {
  if (emits("click")) {
    emits("click");
  } else {
    uni.switchTab({ url: "/pages/index/index" });
  }
};
</script>

<style lang=scss scoped>
.custom-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx;
  .e-title {
    font-weight: bold;
    font-size: 36rpx;
    color: #000;
    margin: 20rpx;
  }
  .e-text {
    font-weight: 500;
    font-size: 32rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  .empty-btn {
    width: 310rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    border-radius: 120rpx;
  }
}
</style>